<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>管理控制台</title>
	<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap-responsive.min.css"/>
	<link rel='stylesheet' type='text/css' href='css/customMarkdown.css'/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<link rel='stylesheet' type='text/css' href="css/lightbox.css"/>
	<script type='text/javascript' src="js/jquery-1.10.1.min.js"/></script>
	<script type='text/javascript' src="assets/bootstrap/js/bootstrap.min.js"/></script>
	<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
	<script type='text/javascript' src='js/lightbox-2.6.min.js'></script>
	<script type='text/javascript' src='js/modernizr.custom.js'></script>
	<script type="text/javascript" src="js/showdown.js"></script>
	<script type="text/javascript" src="js/google-jsapi.js"></script>
	<script type='text/javascript'>
		google.load("visualization", "1", {packages:["corechart","gauge"]});
	</script>
	<script type="text/javascript" src="js/main.js"></script>  
</head>
<body>

<div class='frontLayer'>
<header class="borBox row-fluid pat-lightwool">
	<div class="span2 pull-left">
		<figure class="logo btn btn-success">Virgin</figure>
	</div>
	<div class="span7 pull-left">
		<br/>
	</div>
	<div class="span3 pull-right">
		<div class="loginBox">
			<button class="btn btn-info droppy-toggle right" type='button' data-toggle='droppy'><i class='icon-white icon-user'></i> User&nbsp;&nbsp;<b class='caret'></b></button>
			<ul class="dropdown-menu droppy-menu" id="uOpsL">
				<li><a href="#"><i class='icon-user'></i> Profile</a></li>
				<li><a href="#" data-target='settingsModal'><i class='icon-cog'></i> Settings</a></li>
				<li class='divider'></li>
				<li><a href="#" data-target='loginModal'><i class='icon-share-alt'></i> Log In</a></li>
				<li><a href="#" data-target='registerModal'><i class='icon-bookmark'></i> Register</a></li>
				<li class='divider'></li>
				<li><a href="#"><i class='icon-question-sign'></i> Help</a></li>
			</ul>
		</div>
	</div>

	
</header>
<section class="subHead">
	<section class="row-fluid subHeadInner borBox">
		<div class='span12'>
 
			<h3 class='pull-left welcome'>Welcome</h3>
			<figure class='menuButton btn sharp btn-success'><i class='icon-white icon-th-list'></i> Menu</figure>
			<div class='form-horizontal centerOnPage' >
		       <div class="input-append">
		            <input class="span4fix" id="searchInput" data-provide='typeahead' placeholder="Super Search" data-control='home' size="16" type="text"><button class='btn btn-info droppy-toggle sOpsB' data-toggle='droppy' type='button'>Designs&nbsp;&nbsp;<b class='caret'></b></button><ul class='dropdown-menu droppy-menu' id="sOpsL">
		            	<li><a href="#"><i class='icon-fire'></i> Designs</a></li>
					    <li><a href="#"><i class='icon-eye-open'></i> Apps</a></li>
      					<li><a href="#"><i class='icon-eye-close'></i> Prototypes</a></li>
      					<li class="divider"></li>
      					<li><a href="#"><i class='icon-user'></i> Members</a></li>
      					<li class='divider'></li>
      					<li><a href="#"><i class='icon-align-justify'></i> Articles</a></li>
      				</ul><button class="btn btn-info" type="button"><i class='icon-white icon-search'></i></button>
		       	</div>
	        </div>
			<ul class="bcrumbs pull-right">
				<li>Virgin</li>
				<li class="divdot">.</li>
				<li>Jobs</li>
			</ul>
		</div>
	</section>
</section>
<section class="container-fluid" id="mainContainer">
	<div class="row-fluid">
		<div class="span2 sideBar">
			<ul>
				<li data-link="home" class="active"><figure><i class='icon-home'></i> <div class='menuText'>Home</div></figure></li>
				<li data-link="features"><figure><i class='icon-star'></i> <div class='menuText'>Features</div></figure></li>
				<li data-link="dashboard"><figure><i class='icon-new-dashboard'></i> <div class='menuText'>Dashboard</div></figure></li>
				<hr/>
				<li data-link='portfolio'><figure><i class='icon-th-large'></i> <div class='menuText'>Portfolio</div></figure></li>
				<li data-link="Blog"><figure><i class='icon-th-list'></i> <div class='menuText'>Blog</div></figure></li>
				<hr/>
				<li data-link="none" class='dropper'>
					<figure><i class='icon-th'></i> <div class='menuText'>Gallery&nbsp;?</div></figure>
					<ul class='subSide'>
						<li data-target='photos'><i class='icon-camera'></i> <div class='menuText'>Photos</div></li>
						<li data-target='videos'><i class='icon-facetime-video'></i> <div class='menuText'>Videos</div></li>
						<li data-target='books'><i class='icon-book'></i> <div class='menuText'>Books</div></li>
					</ul>
				</li>
				<!-- THIS WILL ALSO BE ENABLED IN NEXT VERSION -->
				<!-- <li data-link="social"><figure><i class='icon-comment'></i> <div class='menuText'>Social</div></figure></li>		 -->					
				<hr/>
				<!-- THIS WILL BE ENABLED IN NEXT VERSION, ITS NOT OF MUCH IMPORTANCE THOUGH... JUST A LIST OF FEATURES IN THIS THEME -->
				<!--li data-link="none" class='dropper'>
					<figure><i class='icon-gift'></i> <div class='menuText'>Specials&nbsp;?</div></figure>
					<ul class='subSide'>
						<li data-target='quicksand'><i class='icon-star-empty'></i> <div class='menuText'>Quicksand</div></li>
						<li data-target='boxwidget'><i class='icon-star-empty'></i> <div class='menuText'>Box-Widget</div></li>
						<li data-target='googlecharts'><i class='icon-star-empty'></i> <div class='menuText'>Google Charts</div></li>
						<li data-target='flotr2charts'><i class='icon-star-empty'></i> <div class='menuText'>Flotr2 Charts</div></li>
						<li data-target='scrolleffects'><i class='icon-star-empty'></i> <div class='menuText'>Scroll Effects</div></li>
						<li data-target='additionalfeatures'><i class='icon-star-empty'></i> <div class='menuText'>Additional Features</div></li>

					</ul>
				</li>		
				<hr/-->

				<li data-link="members"><figure><i class='icon-new-group'></i> <div class='menuText'>Members</div></figure></li>
				<li data-link="contact"><figure><i class='icon-envelope'></i> <div class='menuText'>Contact</div></figure></li>
			</ul>
		</div>
		<div class="span10 content borBox">
			

<div class='page-header'>
	<h1 class='hBig'>Features
		<small> The Arsenal Provided</small>
	</h1>
</div>

<div class='row-fluid'>
	<div class='row-fluid'>
		<div class='span6 box-widget'>
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> Improved Bootstrap
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>Virgin also boasts several improvements to bootstrap with new features such as: </p>
				<p>
					<ol>
						<li>.sharp class to give a sharp look to elements.</li>
						<li>.box-widget to convert any data into good looking box widget with working buttons</li>
					</ol>
				</p>
			</div>
			<div class='box-widget-footer'>
				Note: Sharp buttons, extra responsiveness, and clean design to this theme is all because of the smart css classes that can be used with already present bootstrap code.

			</div>
		</div>
		<div class='span6 box-widget'>
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> Social Feeds
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>Virgin also has yet one more feature to show off. This theme includes pre coded css to display social feeds in a beautiful and consistent manner.</p>
				<p><strong>Head over to Social Tab on left</strong></p>
				<p>Currently the template includes option for facebook, google+ and twitter only but as i get more time i'll work on adding more cool functions, such as: automated ajax loading of social feeds.</p>
			</div>
			<div class='box-widget-footer'>
				Note: You can configure the social feeds by adding just your social network username.
			</div>
		</div>
	</div><br/>
	<div class='row-fluid'>
		<div class='span4 box-widget'>
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> Gallery
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>Three Types of galleries are coded in virgin. Extra plugins can be added to every gallery. Just initialize the plugin function in 'chain.gallery'</p>
				<p><strong>Photos Gallery</strong></p>
				<p><strong>Videos Gallery</strong></p>
				<p><strong>Books Gallery</strong></p>
			</div>
			<div class='box-widget-footer'>
				Note: Flowplayer configurations can be initialized under chain.gallery.This avoids unnecessary content loading.
			</div>
		</div>
		<div class='span4 box-widget'>
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> Box Widgets
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>These beautifully coded Box-Widgets blend perfectly with this theme and these also show responsive behaviour</p>
				<p>Box-Widgets are fully compatible with Bootstrap's span class.</p>
				<p><strong>Change the span class to adjust widths of box widgets.</strong></p>
				
			</div>
			<div class='box-widget-footer'>
				Note: span4, span6, span3 etx will change the width of box-widgets
			</div>
		</div>
		<div class='span4 box-widget'>
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> Pre-Coded Functions
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>Pre-Coded Functions have been included in theme to automate several tasks such as charts generation, dynamic loading of pages, utilization of json data and much more.</p>
				<p>What's more awesome??</p>
				<p>These functions can be called anytime and can be used in commandline present in this theme. Press ` to access commandline</p>
			</div>
			<div class='box-widget-footer'>
				Note: Some sample functions are "loadPage('pagename'), playMP3('/path/to/mp3') etc."
			</div>
		</div>

	</div><br/>
	<div class='row-fluid'>
		<div class='span6 box-widget'>
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> Markdown Enabled
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>This theme utilizes the free showdown.js markdown parser which is actively used in portfolio menu.</p>
				<p>Content related to portfolio item can be written in markdown format and saved with a specific name. The theme automatically picks up the markdow, converts it to html using showdown.js parser and displays portfolio item details as the result</p>
				
			</div>
			<div class='box-widget-footer'>
				Note: Read the source code for more details on how to delight your visitors with markdown enabled portfolio.
			</div>
		</div>
		<div class='span6 box-widget'>
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> JSON Automation
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>Other than being awesome, responsive and filled to the brim with great design. Virgin also boasts automated data generation from JSON Objects</p>
				<p>Pre-coded functions to utilize json files handle the beautiful html generation</p>
				<p>You don't do anything to configure portfolio or members list, <strong>Just edit the JSON file provided</strong></p>
				
			</div>
			<div class='box-widget-footer'>
				Note: Edit the members.json in 'data' folder to see immediate changes in Members List
			</div>
		</div>
	</div><br/>
	<div class='row-fluid'>
		<div class='span6 box-widget'>
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> Command Line
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>Yup, You heard it right.</p>
				<p>This theme features a commandline for quick access to automation tasks.</p>
				<p>You can play music, jump to different pages, access email quickly, check updates, modify tasks, and do whatever you want with this function</p>
				<p>I myself being a programmer, miss terminal very much. :P</p>

				<p><strong> Press ` key to toggle commandline </strong></p>
				<p>Here's a sample function, type this in command line <code>goto('dashboard')</code></p>
			</div>
			<div class='box-widget-footer'>
				Note: Here's another sample function, "goto('dashboard')".
			</div>
		</div>
		<div class='span6 box-widget'>
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> Responsive Design
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>This theme is blessed with CSS3 goodness. It automatically detects the device type ( monitor, tablet or phones) and adjusts accordingly to give you the best experience.</p>

				<p><strong>Try resizing your browser, Go on :)</strong></p>
			</div>
			<div class='box-widget-footer'>
				Note: Sidebar Menu will be hidden for screen sizes less than 767px (phones). However, It can always be accessed by a Menu button just before the search.
			</div>
		</div>
	</div><br/>
	<div class="row-fluid">
		<div class="span6 box-widget">
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> 400+ Icons
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>This theme features more than 400+ Icons. In both 14x14 and 24x24 sizes.</p>
				<p>Twitter's bootstrap features hardly 120 Icons, This theme includes all 400 glyphicons and that too in 24x24 Size</p>
			</div>
			<div class='box-widget-footer'>
				Note: You should explicitly mention name of glyphicons.com with a link if you plan to use these icons.
			</div>
		</div>
		<div class="span6 box-widget">
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> Plugin Ready
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>This theme is carefully designed with expandability in mind.</p>
				<p>Separate css and js files can be added later for more functionality. Without compromizing the working of base theme</p>
				<p>Almost like a CMS. Ain't :P </p>
			</div>
			<div class='box-widget-footer'>
				Note: Whenever i release a plugin for this theme. You can use it efforlessly. Just add one more line to the code and you're done.
			</div>
		</div>
	</div><br/>
	<div class='row-fluid'>
		<div class='span6 box-widget'>
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> Execution Chains
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>Automate tasks for specific pages or for every page by adding the function in 'chain' object</p>
				<p><code>chain.portfolio = function(){ functionA(); functionB(); }</code></p>
				<p>Execution chains are one of the unique features of this theme and immensely useful. Initializing specific code in execution chains helps improve performance greatly by executing only required functions.</p>
				<p>Execution chains are perfect for admin themes. Administrators can define custom functions and add them to execution chains spefic to pages for a incredibly fast performance. Administrators will know. :)</p>
			</div>
			<div class='box-widget-footer'>
				Note: Whatever functions you drop/define inside the execution chain of a page, will get executed only after that page has been loaded. Thus eliminating a very common error.
			</div>
		</div>
		<div class='span6 box-widget'>
			<div class='box-widget-head'>
				<div class='pull-left'>
					<i class='icon-eye-open'></i> Load Specific Pages
				</div>
				<div class='pull-right btn-group sharp'>
					<button class='btn btn-mini noGR'><i class='icon-chevron-down'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-chevron-up'></i></button>
					<button class='btn btn-mini noGR'><i class='icon-remove'></i></button>
				</div>
			</div>
			<div class='box-widget-body'>
				<p>Pages can be loaded manually by using ajax based function 'loadPage'. It takes only one argument, i.e name of target html file without the '.html' extension.</p>
				<p>Suppose, if you have a page named 'contacts.html' inside 'pages' directory. Then you should call that page like this.</p>
				<br/>
				<p><code>loadPage('contacts')</code></p>
				<br/>
				<p>This page will be automatically loaded, with the following default events.
					<ol>
						<li>Page will be loaded</li>
						<li>Sidebar will be updated with appropriate highlighting of current tab</li>
						<li>Breadcrumbs on top right will be updated</li>
						<li>A notification will be shown</li>
					</ol>
				</p>

			</div>
			<div class='box-widget-footer'>
				Note: Pages can be loaded dynamically from anywhere using this function,  For Example... Press Spacebar and type "loadPage('members')" in the command window that opens.

			</div>
		</div>
	</div>
	
</div>


		</div>
	</div>
</section>
<footer>
	<div class="container-fluid" id="footMain">
		<div class="row-fluid">
			<div class="span6">
				<div class="pull-left">
					<h6>Press ` or tilde key to access command line</h6>
				</div>
			</div>
			<div class="span6">
				<div class="pull-right">
					<h6>Company Name Here</h6>
				</div>
			</div>
		</div>
	</div>
</footer>
</div>


 <!-- ##### MODALS #####- -->
<div class='modal fade hide' id="thisModal">

</div>


<!-- ### BACKGROUND DIV -->
<div class='bg'>
</div>

<div class='commandWindow hide'>
	<div class='commandWindow-inner'>
		<h2 class='hBig'>CommandLine</h2><br/>
		<div class='form sharp form-horizontal'>
			<div class='input-append row-fluid'>
				<input class='sharp span9' id="commandInput" placeholder='Enter Command' type='text'/><button class='btn btn-info'>Go</button>
			</div>
		</div>
		<br/>
		<div class='alert fade in'>
			<a class='close' data-dismiss='alert'>&times;</a>
			<p>Type <code> goto("dashboard") or goto("portfolio") </code></p>

		</div>
	</div>
</div>


</body>
</html>
